<style scoped>
    .item-card-body{
      text-align: center;
    }
    .card-body-num{
      font-size: 72px;
      line-height: 72px;
    }
</style>
<template>
<div>
  <Row class-name="rowMargin" :gutter='16'>
    <Col span="8">
      <div class="item shadow">
        <Card class="important-notice" shadow>
            <p slot="title"><Icon type="ios-film-outline"></Icon> 重要通知</p>
            <a href="#" slot="extra" @click.prevent="changeLimit">
                <Icon type="ios-loop-strong"></Icon>
                Change
            </a>
            <ul>
                <li v-for="item in randomMovieList">
                    <a :href="item.url" target="_blank">{{ item.name }}</a>
                    <span style="float:right;color:#ffac2d">
                        <Icon type="ios-star" v-for="n in 4" :key="n"></Icon><Icon type="ios-star" v-if="item.rate >= 9.5"></Icon><Icon type="ios-star-half" v-else></Icon>
                        {{ item.rate }}
                    </span>
                </li>
            </ul>
        </Card>
      </div>
    </Col>
    <Col span="4">
      <div class="item shadow">
        <Card style="background:#f56954;" shadow>
          <div class="color-block">
            <div class="color-block-title">
              <font size="60px">29</font><span>th</span>
            </div>
            <div class="color-block-body">
              <p>
                今日日期
              </p>
              <h5>2017/11</h5>
            </div>
            <div class="color-block-icon">
              <Icon type="calendar" size="64"></Icon>
            </div>
          </div>
        </Card>
      </div>
    </Col>
    <Col span="4">
      <div class="item shadow">
        <Card style="background:#0073b7;" shadow>
          <div class="color-block">
            <div class="color-block-title">
              <font size="60px">12</font><span>rd</span>
            </div>
            <div class="color-block-body">
              <p>
                待办事项
              </p>
              <h5>本月 12/50</h5>
            </div>
            <div class="color-block-icon">
              <Icon type="calendar" size="64"></Icon>
            </div>
          </div>
        </Card>
      </div>
    </Col>
    <Col span="4">
      <div class="item shadow">
        <Card style="background:#00a65a;" shadow>
          <div class="color-block">
            <div class="color-block-title">
              <font size="60px">34</font><span>℃</span>
            </div>
            <div class="color-block-body">
              <p>
                今日天气 有雨
              </p>
              <h5>本月 12/50</h5>
            </div>
            <div class="color-block-icon">
              <Icon type="calendar" size="64"></Icon>
            </div>
          </div>
        </Card>
      </div>
    </Col>
    <Col span="4">
      <div class="item shadow">
        <Card style="background:#00c0ef;" shadow>
          <div class="color-block">
            <div class="color-block-title">
              <font size="60px">12</font><span>rd</span>
            </div>
            <div class="color-block-body">
              <p>
                待办事项
              </p>
              <h5>本月 12/50</h5>
            </div>
            <div class="color-block-icon">
              <Icon type="calendar" size="64"></Icon>
            </div>
          </div>
        </Card>
      </div>
    </Col>
  </Row>
  <Row class-name="rowMargin" :gutter='16'>
      <Col span="6">
        <div class="item shadow">
          <div class="item-head">
            <div class="item-head-left">
              未读消息
            </div>
            <div class="item-head-right">
              <Icon style="font-size:20px;" type="more"></Icon>
            </div>
          </div>
          <div class="item-body item-card-body">
            <div style="color:#ed3f14" class="card-body-num">
              36
            </div>
            <div class="card-body-footnote">
              30 DAYS
            </div>
          </div>
          <div class="item-foot">
            <span>Last year same time: 14</span>
          </div>
        </div>
      </Col>
      <Col span="6">
        <div class="item">
          <div class="item shadow">
            <div class="item-head">
              <div class="item-head-left">
                今日访问量
              </div>
              <div class="item-head-right">
                <Icon style="font-size:20px;" type="gear-a"></Icon>
              </div>
            </div>
            <div class="item-body item-card-body">
              <div style="color:#80848f" class="card-body-num">
                72
              </div>
              <div class="card-body-footnote">
                CONVERSION RATE
              </div>
            </div>
            <div class="item-foot">
              <span>Last year same time: 14</span>
            </div>
          </div>
        </div>
      </Col>
      <Col span="6">
        <div class="item">
          <div class="item shadow">
            <div class="item-head">
              <div class="item-head-left">
                今日访问量
              </div>
              <div class="item-head-right">
                <Icon style="font-size:20px;" type="gear-a"></Icon>
              </div>
            </div>
            <div class="item-body item-card-body">
              <div style="color:#ff9900" class="card-body-num">
                72
              </div>
              <div class="card-body-footnote">
                CONVERSION RATE
              </div>
            </div>
            <div class="item-foot">
              <span>Last year same time: 14</span>
            </div>
          </div>
        </div>
      </Col>
      <Col span="6">
        <div class="item">
          <div class="item shadow">
            <div class="item-head">
              <div class="item-head-left">
                浏览量
              </div>
              <div class="item-head-right">
                <Icon style="font-size:20px;" type="refresh"></Icon>
              </div>
            </div>
            <div class="item-body item-card-body">
              <div style="color:#2d8cf0" class="card-body-num">
                56
              </div>
              <div class="card-body-footnote">
                last 30 minutes
              </div>
            </div>
            <div class="item-foot">
              <span>Total visitors today: 998</span>
            </div>
          </div>
        </div>
      </Col>
    </Row>
    <Row class-name="rowMargin" :gutter='16'>
      <Col span="16">
        <div class="item shadow">
          <Card shadow>
              <p slot="title">今日计划</p>
              <p>Content of card</p>
              <p>Content of card</p>
              <p>Content of card</p>
          </Card>
        </div>
      </Col>
      <Col span="8">
        <div class="item shadow">
          <Card shadow>
              <p slot="title">今日计划</p>
              <p>Content of card</p>
              <p>Content of card</p>
              <p>Content of card</p>
          </Card>
        </div>
      </Col>
    </Row>
    <Row class-name="rowMargin" :gutter='16'>
      <Col span="12">
        <div class="item shadow"><line-chart :xlabels="setLabel" :ele="setEle" :eledata="setEledata"></line-chart></div>
      </Col>
      <Col span="12">
        <div class="item shadow">
          <bar-chart :xlabels="setLabel" :ele="setEle1" :eledata="setEledata"></bar-chart>
        </div>
      </Col>
    </Row>
</div>

</template>
<script>
    import lineChart from './component/chart/line-chart.vue';
    import barChart from './component/chart/bar-chart.vue';

    export default {
        components:{
          lineChart,
          barChart
        },
        data:function(){
          return{
            setLabel:["January","February","March","April","May","June","July"],
            setEle:[{label:"sad",Bcolor:"#0088cc"},{label:"asasad",Bcolor:"#76bccf"},{label:"sdas",Bcolor:"#6b89be"}],
            setEledata:[[25,59,90,51,56,55,40],[28,48,40,19,96,27,100],[12,45,78,34,55,6,67]],
            setEle1:[{label:"sad",BGcolor:"#0088cc"},{label:"asasad",BGcolor:"#76bccf"},{label:"sdas",BGcolor:"#6b89be"}],
            movieList: [
                    {
                        name: 'The Shawshank Redemption',
                        url: 'https://movie.douban.com/subject/1292052/',
                        rate: 9.6
                    },
                    {
                        name: 'Leon:The Professional',
                        url: 'https://movie.douban.com/subject/1295644/',
                        rate: 9.4
                    },
                    {
                        name: 'Farewell to My Concubine',
                        url: 'https://movie.douban.com/subject/1291546/',
                        rate: 9.5
                    },
                    {
                        name: 'Forrest Gump',
                        url: 'https://movie.douban.com/subject/1292720/',
                        rate: 9.4
                    },
                    {
                        name: 'Life Is Beautiful',
                        url: 'https://movie.douban.com/subject/1292063/',
                        rate: 9.5
                    },
                    {
                        name: 'Spirited Away',
                        url: 'https://movie.douban.com/subject/1291561/',
                        rate: 9.2
                    },
                    {
                        name: 'Schindlers List',
                        url: 'https://movie.douban.com/subject/1295124/',
                        rate: 9.4
                    },
                    {
                        name: 'The Legend of 1900',
                        url: 'https://movie.douban.com/subject/1292001/',
                        rate: 9.2
                    },
                    {
                        name: 'WALL·E',
                        url: 'https://movie.douban.com/subject/2131459/',
                        rate: 9.3
                    },
                    {
                        name: 'Inception',
                        url: 'https://movie.douban.com/subject/3541415/',
                        rate: 9.2
                    }
                ],
                randomMovieList: []

          }
        },
        mounted:function(){
          this.changeLimit();
        },
        methods: {
          changeLimit () {
                function getArrayItems(arr, num) {
                    const temp_array = [];
                    for (let index in arr) {
                        temp_array.push(arr[index]);
                    }
                    const return_array = [];
                    for (let i = 0; i<num; i++) {
                        if (temp_array.length>0) {
                            const arrIndex = Math.floor(Math.random()*temp_array.length);
                            return_array[i] = temp_array[arrIndex];
                            temp_array.splice(arrIndex, 1);
                        } else {
                            break;
                        }
                    }
                    return return_array;
                }
                this.randomMovieList = getArrayItems(this.movieList, 4);
            }
        }
    };
</script>
